<template>
  <div id="deviceCommonEdit">
    <Modal v-model="modal.show"  :loading="modal.loading" :title="modal.title"  :mask-closable="false" :footer-hide=true width="700px" :closable="false">
      <Form ref="formDeviceCommon" :model="rowData" label-position="right" :label-width="80" :rules="rules">
        <FormItem :label="$t('code')" prop="code"><Input v-model="rowData.code" :disabled="modal.readonly" ></Input></FormItem>
        <FormItem :label="$t('name')"  prop="name"><Input v-model="rowData.name" :disabled="modal.readonly"></Input></FormItem>
        <FormItem :label="$t('status')">
          <RadioGroup v-model="rowData.state" >
            <Radio :label=1 border :disabled="modal.readonly">{{$t('device_status_1')}}</Radio>
            <Radio :label=2 border :disabled="modal.readonly">{{$t('device_status_2')}}</Radio>
            <Radio :label=3 border :disabled="modal.readonly">{{$t('device_status_3')}}</Radio>
          </RadioGroup>
        </FormItem>

        <FormItem :label="$t('organization')">
          <OrganizationTree v-model="rowData.orgId" :readonly="modal.readonly" width="200px"></OrganizationTree>
        </FormItem>
        <FormItem :label="$t('personnel')">
          <UserSelect ref="edtUserSelect"
                      v-model="rowData.userId"
                      :srhValue="rowData.userName"
                      :readonly="modal.readonly"
                      width="200px"></UserSelect>
        </FormItem>
        <FormItem>
          <div style="float: right;">
            <Button v-show="modal.action!='VIEW'" type="primary"  @click="save1" >{{$t('save')}}</Button>
            <Button @click="close">{{$t('cancel')}}</Button>
          </div>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import OrganizationTree from '@/components/topnav/OrganizationTree';
import UserSelect from "_c/topnav/UserModelSelect";
import Device from '@/api/Device';
import {apiResult} from "@/libs/util";
export default {
  name: "deviceCommonEdit",
  components: {OrganizationTree,UserSelect},
  computed:{
    rules(){
      return{
        code:[{required: true, message: this.$t('code_must_be_enter'), trigger: 'blur'}],
        name:[{required: true, message: this.$t('name_must_be_enter'), trigger: 'blur'}],
      }
    }
  },
  data(){
      return{
        api: new Device(),
        modal:{
          show:false,
          loading:false,
          title:"",
          action:"VIEW",
          callback:null,
          readonly:false
        },
        rowData: this.initRow(),


      }
    },
  methods:{
    initRow:function () {
      return {
        cate: 1,
        type: 1,
        id: null,
        code: null,
        name: null,
        state: 1,
        orgId: null,
        orgCode: null,
        orgName: null,
        shortName: null,
        path: null,
        userId: null,
        userName: null,
      }
    },
    openDialog: function (action,row, callback) {
      this.modal.show = true;
      this.modal.readonly = false;
      this.modal.callback = callback;
      this.modal.action = action;
      if (action=="ADD"){
        this.modal.title=this.$t("add");
        this.rowData = this.initRow();
        this.$refs["formDeviceCommon"].resetFields();
      }else if (action=="VIEW"){
        this.modal.title=this.$t("browse");
        this.modal.readonly=true;
      }else if (action=="EDIT"){
        this.modal.title=this.$t("edit");
      }
      if (row != null) {
        this.rowData = row;
      }
    },
    close: function(){
      this.modal.show = false;
    },
    save1: function(){
      let that = this;
      that.rowData.cate = 1;
      this.$refs["formDeviceCommon"].validate((valid) => {
        if (that.modal.action == "VIEW"){that.close();}
        if (valid) {
          /** 新增 */
          if (that.rowData.id == null){
            this.api.addDevice(JSON.stringify(that.rowData)).then(res => {
              apiResult(res.data,true,result=>{
                if (!!that.modal.callback) that.modal.callback();
                that.close();
              })

            })
          }else{
            this.api.updateDevice(JSON.stringify(that.rowData)).then(res => {
              apiResult(res.data,true,result=>{
                if (!!that.modal.callback) that.modal.callback();
                that.close();
              })
            })
          }
        } else {
          that.$Message.error(this.$t('data_check_error'));
          return;
        }
      })
    },
  },
}
</script>
<style>

</style>
<style lang="less">
@import ".././template";
</style>
